<template>
  <div class="app-container pg-aliorder-workorder">
    <!-- top-search begin -->
    <div ref="topSearch" class="top-search top-more-search" v-show="showSearch">
      <el-form
        inline
        ref="searchForm"
        label-width="0"
        class="search-form"
        :class="{ 'show-more': showFormMore }"
        :model="searchForm">
        <el-form-item prop="orderNumber">
          <el-input v-model="searchForm.orderNumber" placeholder="工单号" clearable @keyup.enter.native="search()" />
        </el-form-item>
        <el-form-item prop="aliOrderNumber">
          <el-input v-model="searchForm.aliOrderNumber" placeholder="阿里单号" clearable @keyup.enter.native="search()" />
        </el-form-item>
        <el-form-item prop="orderStatus">
          <dg-dict-select
            dictType="ali_work_order_status"
            v-model="searchForm.orderStatus"
            clearable
            placeholder="工单状态"
            @change="search()" />
        </el-form-item>
        <el-form-item prop="orderAction">
          <dg-dict-select
            dictType="ali_work_order_deal_status"
            v-model="searchForm.orderAction"
            clearable
            placeholder="工单动作"
            @change="search()" />
        </el-form-item>
        <el-form-item prop="orderType">
          <dg-dict-select
            dictType="ali_work_order_type"
            v-model="searchForm.orderType"
            clearable
            placeholder="工单类型"
            @change="search()" />
        </el-form-item>
        <div class="search-more-item" v-show="isBigWindow || showFormMore">
          <el-form-item prop="dateRange">
            <el-date-picker v-model="searchForm.dateRange" type="daterange" unlink-panels range-separator="-"
              start-placeholder="开始日期" end-placeholder="截止日期" value-format="yyyy-MM-dd HH:mm:ss" clearable
              :default-time="['00:00:00', '23:59:59']" @change="search()">
            </el-date-picker>
          </el-form-item>
        </div>
        <el-form-item class="search-btn-part">
          <el-button type="primary" @click="search()">查询</el-button>
          <el-button @click="resetQuery()">重置</el-button>
          <el-button v-if="!isBigWindow" class="more-btn" type="text" size="small" @click="searchShowMore()">{{ !showFormMore ? '更多搜索' : '收起'
          }}<span class="ml5" :class="`el-icon-arrow-${!showFormMore ? 'down' : 'up'}`"></span></el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- top-search end -->
    <!-- right-toolbar begin -->
    <right-toolbar ref="rightToolbar" :showSearch.sync="showSearch" @queryTable="search()"></right-toolbar>
    <!-- right-toolbar end -->
    <!-- table begin -->
    <el-table ref="pageTable" class="page-table border-all mt10"
      :data="tableData" :height="tableHeight" border stripe>
      <el-table-column show-overflow-tooltip prop="workOrderNo" label="工单号" align="center" min-width="150" sortable fixed></el-table-column>
      <el-table-column show-overflow-tooltip prop="aliOrderNo" label="阿里单号" align="center" min-width="150" sortable fixed></el-table-column>
      <el-table-column show-overflow-tooltip prop="workOrderStatus" label="工单状态" align="center" min-width="78">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.ali_work_order_status" :value="scope.row.workOrderStatus" />
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="followUpContent" label="跟进内容" min-width="300"></el-table-column>
      <el-table-column show-overflow-tooltip prop="workOrderNeed" label="工单动作" align="center" min-width="98">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.ali_work_order_deal_status" :value="scope.row.workOrderNeed" />
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="workOrderType" label="工单类型" align="center" min-width="98">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.ali_work_order_type" :value="scope.row.workOrderType" />
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="workOrderDetain" label="处理动作" align="center" min-width="98">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.ali_work_order_deal_type" :value="scope.row.workOrderDetain" />
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="createBy" label="创建人" align="center" min-width="108"></el-table-column>
      <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" align="center" min-width="158"></el-table-column>
      <el-table-column label="操作" width="68" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="opera-row">
            <el-button type="text" class="opera-item" @click="handleShow(scope.row)">处理工单</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- table begin -->
    <!-- page-pagination begin -->
    <pagination
      class="page-pagination"
      :total="total"
      :page-size="pageSize"
      :page-index="pageIndex"
      @change="pageChange">
    </pagination>
    <!-- page-pagination end -->

    <!-- dialog-workorder-track begin -->
    <dialog-workorder-track :show.sync="dialogTrack" :order="trackOrder" @refresh="search" />
    <!-- dialog-workorder-track end -->
  </div>
</template>

<script>
import mixin from '@/utils/filtermixin/mixin';
import listmixin from '@/utils/list-mixin';
import DialogWorkorderTrack from './components/dialog-workorder-track';
import * as API_WorkOrder  from '@/api/aliorder/workorder';

export default {
  name: 'pg-aliorder-workorder',
  components: {
    DialogWorkorderTrack
  },
  dicts: [
    'ali_work_order_status',
    'ali_work_order_deal_status',
    'ali_work_order_type',
    'ali_work_order_deal_type'
  ],
  mixins: [mixin, listmixin],
  data () {
    return {
      // 遮罩层
      loading: true,
      searchForm: {
        aliOrderNumber: undefined,
        orderNumber: undefined,
        orderStatus: undefined,
        orderAction: undefined,
        orderType: undefined,
        dateRange: undefined
      },
      tableData: [],

      // 处理弹层
      dialogTrack: false,
      trackOrder: undefined,

      // 分页属性
      total: 0, // 记录总条数
      pageSize: 20, // 每页显示条数
      pageIndex: 1 // 当前页
    };
  },
  mounted () {
    // 获取页面数据
    this.search();
  },
  methods: {
    /**
      * @date 2025/07/08
      * @author wolfMan
      * @description {页面查询}
    */
    search (_type) {
      let _params = this.MixinFilterParams(this.MixinClone(this.searchForm));
      if (_params.dateRange && _params.dateRange.length) {
        _params.startCreateTime = _params.dateRange[0];
        _params.endCreateTime = _params.dateRange[1];
        delete _params.dateRange;
      };
      // 重置分页
      if (_type !== 'selectPage') {
        this.pageIndex = 1; // 重置翻页当前页
      };
      this.getPageData(_params);
    },
    /**
      * @date 2025/07/09
      * @author wolfMan
      * @description {获取页面数据}
    */
    getPageData (params) {
      let _params = {
        ...params,
        pageNum: this.pageIndex,
        pageSize: this.pageSize
      };
      API_WorkOrder.getListService(_params).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
      });
    },
    /**
      * @date 2025/07/10
      * @author wolfMan
      * @description {显示工单处理弹层}
    */
    handleShow (_row) {
      this.trackOrder = _row;
      this.dialogTrack = true;
    }
  }
};
</script>

<style lang="scss" scoped></style>
